<template>
  <div>
    <el-table v-bind="tableProps">
      <template v-for="({children,...column},idx) in columns">
        <el-table-column
          v-if="children"
          :key="column.id || idx"
          v-bind="column"
        >
          <template slot-scope="scope">
            <template v-for="(child,childIdx) in children">
              <el-button
                v-if="child.type === 'button'"
                :key="childIdx"
                v-bind="columnChildPropsMapper(scope,child.key)"
                @click="(e)=> $emit('onEvent','btn-click',child.key,scope.row,e)"
              >{{ child.name }}</el-button>

              <el-tag
                v-if="child.type === 'tag'"
                :key="childIdx"
                v-bind="columnChildPropsMapper(scope,child.key)"
                @click="(e)=> $emit('onEvent','tag-click',child.key,scope.row,e)"
              >{{ child.name }}</el-tag>

              <i
                v-if="child.type === 'icon'"
                :key="childIdx"
                v-bind="columnChildPropsMapper(scope,child.key)"
              />
            </template>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="column.id || idx"
          v-bind="column"
        />
      </template>
    </el-table>
    <el-pagination
      v-bind="{...DEFAULT_PAGINATION_PROPS,...paginationProps}"
      @current-change="(currentPage) => $emit('onEvent','current-change',currentPage)"
      @size-change="(currentSize) => $emit('onEvent','size-change',currentSize)"
    />
  </div>
</template>

<script>
const DEFAULT_PAGINATION_PROPS = {
  'page-size': 5,
  'page-sizes': [5, 10, 15, 20],
  'layout': 'sizes,total,prev,pager,next',
  'total': 16
}

export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    tableProps: {
      type: Object,
      required: true
    },
    // eslint-disable-next-line vue/require-default-prop
    paginationProps: Object,
    // eslint-disable-next-line vue/require-default-prop
    columnChildPropsMapper: Function
  },
  data() {
    return {
      DEFAULT_PAGINATION_PROPS
    }
  }
}
</script>
